<template>
  <div class="block-wrap" :style="position">
    <h5 v-drag @dblclick="fold">{{blockData.title}}</h5>
    <div :class="{'inner-wrap':true,'fold':isFold}">
      <slot></slot>
      <!-- <table border="1" cellspacing="0">
        <tr v-for="(item,i) in blockData.data" :key="i">
          <td class="name">{{item.name}}</td>
          <template v-if="item.value !== undefined">
            <td class="val" v-if="typeof(item.value)==='number'">{{item.value.toFixed(blockPrecision)}}</td>
            <td class="val" v-else>{{item.value}}</td>
          </template>          
        </tr>
      </table>-->
    </div>
  </div>
</template>

<script>
export default {
  name: "block",
  props: {
    blockData: {
      type: Object,
    },
    blockPos: {
      type: Object,
      default: function () {
        return {
          width: "250px",
          top: "0%",
          left: "0%",
          right: "0%",
        };
      },
    },
    foldStatus: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      isFold: this.foldStatus,
    };
  },
  computed: {
    position() {
      return {
        width: this.blockPos.width,
        top: this.blockPos.top,
        left: this.blockPos.left ? this.blockPos.left : "",
        right: this.blockPos.right ? this.blockPos.right : "",
      };
    },
  },
  methods: {
    fold(e) {
      e.preventDefault();
      e.target.parentNode.style.height = "auto";
      this.isFold = !this.isFold;
    },
  },
};
</script>

<style lang="scss" scoped>
.block-wrap {
  position: absolute;
  box-sizing: border-box;
  padding: 4px;
  background-image: url("../../assets/images/devices/block-bg01.png"),
    url("../../assets/images/devices/block-bg02.png"),
    url("../../assets/images/devices/block-bg03.png"),
    url("../../assets/images/devices/block-bg04.png");
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 10px;
  background-color: rgb(114 130 144 / 30%);
  // background: url(../../assets/images/devices/block-bg.png) no-repeat;
  // background-size: 10% 10%;
  resize: horizontal;
  overflow: hidden;
  h5 {
    margin: 0;
    font-size: 12px;
    background: rgb(62, 182, 156);
    padding: 3px 10px;
    line-height: normal;
    &:hover {
      cursor: move;
    }
  }
  .inner-wrap {
    overflow: hidden;
    &.fold {
      height: 0;
    }
  }
  table {
    width: 100%;
    color: #1cc0ff;
    font-size: 12px;
    table-layout: fixed;

    tr {
      td {
        text-align: center;
        padding: 3px;
        line-height: normal;
        background: rgba(10, 47, 103, 0.3);
      }
      .val {
        width: 35%;
        background: rgba(0, 0, 0, 0.8);
        color: #cec242;
      }
      .suffix {
        width: 40px;
      }
    }
  }
}
</style>
